<template>
  <div class="home_top">
    <div>
      <el-button @click="save">save</el-button>
    </div>

    <net-select-table
      v-if="data.save"
      ref="netDialogRef"
      @closed="data.save = false"
      @parentMethod="childMethod"
    ></net-select-table>
    <span class="text">快捷操作</span>
    <div
      class="home_top_quick_actionList"
      v-for="item in data.actionList"
      v-if="data.actionList.length > 0"
    >
      <div class="jumpList" @click="Jump(item.path)">
        <component class="component" :is="item.icon"></component>
        <span>{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NetSelectTable from '@/components/NetSelectTable/index.vue';
import { ref, reactive, nextTick, unref } from 'vue';
import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
/**
 * 引入api接口
 */
import menuAPi from '@/api/menu/index';
let router = useRouter();
const childMethod = (list: any) => {
  // data.actionList = list;
};
const Jump = (path: string) => {
  router.push(path);
};
const netDialogRef = ref('');
const data = reactive<any>({
  save: false,
  actionList: [],
});
const save = () => {
  data.save = true;
  //
  nextTick(() => {
    (netDialogRef as any).value.open();
  });
};
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const query = async () => {
  var res = await menuAPi.gethomemenulist.post();
  data.actionList = res.data;
};
query();
</script>
<style scoped lang="scss">
/**
  首页顶部栏
  
  */
.home_top {
  background-color: #ffffff;
  height: 100%;
  width: 100%;
  display: flex;

  /**
	  快捷操作div
	*/
  .home_top_quick_actionList {
    height: 20px;
    width: 120px;
    text-align: center;
    display: flex;
    /**
	span标签样式
	*/
    .text {
      margin-top: 50px;
      height: 20px;
      font-size: 12px;
    }
    .component {
      margin-top: 70px;
      height: 12px;
    }
    /**
	span标签样式
	*/
    // span {
    //   margin: 20px;
    //   font-size: 15px;
    // }
  }
}
</style>
